<template>
  <div style="width:90%" class="div">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="合同信息" :disabled="infoStatus" name="first">
        <!-- 房产信息           -->
        <el-form :inline="true">
          <i class="line" />
          <el-form-item><span class="fc">房产信息</span></el-form-item>
          <el-form-item><el-button type="warning" @click="selectHouse()">选择房产</el-button></el-form-item>
        </el-form>
        <hr>
        <!--房产信息表单            -->
        <el-form :inline="true" :model="contractForm" class="demo-form-inline">
          <el-form-item label="小区名称" class="xq">
            <el-input v-model="contractForm.premiseName" readonly placeholder="小区名称" />
          </el-form-item>
          <el-form-item label="房产信息" class="fc1">
            <el-input v-model="contractForm.houseInfo" readonly placeholder="房产信息" />
          </el-form-item>
          <el-form-item label="所有权类型" class="xq">
            <el-select v-model="contractForm.houseType" placeholder="所有权类型">
              <el-option v-for="(houseType,index) in houseAllTypes" :key="index" :label="houseType" :value="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="房产证书编号" class="fczs">
            <el-input v-model="contractForm.houseZsNo" placeholder="房产证书编号" />
          </el-form-item>
          <el-form-item label="产权地址" class="xq">
            <el-input v-model="contractForm.cqAddress" placeholder="产权地址" />
          </el-form-item>
          <!-- 业主信息           -->
          <br>
          <i class="line" />
          <span class="fc">业主信息</span>
          <hr>
          <!--业主信息表单            -->
          <el-form-item label="业主姓名" class="xq">
            <el-input v-model="contractForm.ownerName" style="width: 180px;margin-right: 20px" placeholder="业主姓名" />
            <el-checkbox v-model="signWithOwner" @change="handleChecked">是否是签约人</el-checkbox>
          </el-form-item>
          <el-form-item style="margin-left: 50px">
            <el-select v-model="contractForm.certificateType" style="width: 90px">
              <el-option v-for="(certificateType,index) in certificateTypes" :key="index" :label="certificateType" :value="index" />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 10px" label="业主证件号码" class="fc1">
            <el-input v-model="contractForm.ownerIdCard" placeholder="业主证件号码" />
          </el-form-item>
          <el-form-item label="业主手机号" class="xq">
            <el-input v-model="contractForm.ownerMobile" placeholder="业主手机号" />
          </el-form-item>
          <el-form-item label="业主联系地址" class="lx">
            <el-input v-model="contractForm.ownerContactAddress" placeholder="业主联系地址" />
          </el-form-item>
          <el-form-item label="签约人" class="xq">
            <el-input v-model="contractForm.signUserName" placeholder="签约人" />
          </el-form-item>
          <el-form-item style="margin-left: 190px">
            <el-select v-model="contractForm.certificateType" style="width: 90px">
              <el-option v-for="(certificateType,index) in certificateTypes" :key="index" :label="certificateType" :value="index" />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 10px" label="签约人证件号" class="zj">
            <el-input v-model="contractForm.signUserIdCard" placeholder="签约人证件号" />
          </el-form-item>
          <el-form-item label="签约人手机号" class="xq">
            <el-input v-model="contractForm.signUserMobile" placeholder="签约人手机号" />
          </el-form-item>
          <el-form-item label="紧急联系电话" class="dh">
            <el-input v-model="contractForm.signUserEmergencyPhone" placeholder="紧急联系电话" />
          </el-form-item>
          <el-form-item label="账户类型" class="xq">
            <el-select v-model="optio" placeholder="账户类型">
              <el-option v-for="(item,index) in accountType" :key="index" :label="item" :value="index" />
            </el-select>
          </el-form-item>
          <br>
          <el-form-item label="开户省份" class="xq">
            <el-select v-model="contractForm.bankAccountProvince" placeholder="开户省份">
              <el-option v-for="region in regions" :label="region.regionName" :value="region.regionId" />
            </el-select>
          </el-form-item>
          <el-form-item label="银行名称" class="fc1">
            <el-select v-model="contractForm.bankName" placeholder="银行名称">
              <el-option label="请选择" value="0" />
              <el-option v-for="bank in banks" :key="bank.id" :label="bank.bankName" :value="bank.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="账户名称" class="xq">
            <el-input v-model="contractForm.accountName" placeholder="账户名称" />
          </el-form-item>
          <el-form-item label="银行卡号" class="card">
            <el-input v-model="contractForm.bankCardNumber" placeholder="银行卡号" />
          </el-form-item>
          <el-form-item v-show="optio==0" label="开户支行" class="xq">
            <el-input v-model="contractForm.openingBank" placeholder="开户支行" />
          </el-form-item>
          <el-form-item v-show="optio==0" label="联行行号" class="fc1">
            <el-input v-model="contractForm.bankBranchCodeLh" placeholder="联行行号" />
          </el-form-item>
          <!--租约信息-->
          <br>
          <i class="line" />
          <span class="fc">租约信息</span>
          <hr>
          <!--租约信息表单         -->
          <el-form-item label="租约期限" class="xq">
            <el-date-picker
              v-model="time1"
              type="date"
              placeholder="选择日期"
              style="width: 150px"
              @change="handleTime1"
            /> -
            <el-date-picker
              v-model="time2"
              type="date"
              placeholder="选择日期"
              style="width: 150px"
              @change="handleTime2"
            />
            <el-button style="margin-left: 40px" class="c_monthAll" @click="one()">一年</el-button>
            <el-button class="c_monthAll" @click="two()">二年</el-button>
            <el-button class="c_monthAll" @click="three()">三年</el-button>
            <el-button class="c_monthAll" @click="four()">四年</el-button>
            <el-button class="c_monthAll" @click="five()">五年</el-button>
          </el-form-item>
          <el-form-item label="租金" class="xq">
            <el-input v-model="contractForm.monthRent" placeholder="租金" />
          </el-form-item>
          <el-form-item label="房产押金" class="lx">
            <el-input v-model="contractForm.depositMoney" placeholder="房产押金" />
          </el-form-item>
          <el-form-item label="支付方式" class="xq">
            押：<el-select v-model="contractForm.depositType" placeholder="请选择" style="width: 100px">
            <el-option v-for="(item,index) in paymentMortgageList" :key="index" :label="item" :value="index" />
          </el-select>
            付：<el-select v-model="contractForm.paymentType" placeholder="请选择" style="width: 100px">
            <el-option label="请选择" value="-1" />
            <el-option v-for="(paymentPay,index) in paymentPays" :key="index" :label="paymentPay" :value="index" />
          </el-select>
          </el-form-item>
          <br>
          <el-form-item label="备注" class="xq">
            <enpml-input v-model="contractForm.remark" type="textarea" style="width: 337px;" />
          </el-form-item>
        </el-form>
        <el-button class="qx">取 消</el-button>
        <el-button type="warning" class="xyb" @click="goNext(0)">下一步</el-button>
      </el-tab-pane>
      <!--合同信息结束-->
      <!--附件开始-->
      <el-tab-pane label="附件" :disabled="disStatus" name="second">
        <div style="width:90%" class="div">
          <i class="line" />
          <span class="fc">房产证图片</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="houseDocumentPhotos_uploads"
            :on-change="handleHouseDocumentSuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadDocumentFile">点击上传</el-button>
          <hr>
          <i class="line" />
          <span class="fc">收房合同</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="contractPhotos_uploads"
            :on-change="handleContractSuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadContractFile">点击上传</el-button>
          <hr>
          <i class="line" />
          <span class="fc">业主身份证明</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="cardPhotos_uploads"
            :on-change="handleCardSuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadCardFile">点击上传</el-button>
          <hr>
          <i class="line" />
          <span class="fc">代理人身份证明</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="agentCardPhotos_uploads"
            :on-change="handleAgentCardSuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadAgentCardFile">点击上传</el-button>
          <hr>
          <i class="line" />
          <span class="fc">银行卡信息</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="bankCardInformationPhotos_uploads"
            :on-change="handleBankCardSuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadBankCardFile">点击上传</el-button>
          <hr>
          <i class="line" />
          <span class="fc">委托书</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="attorneyPhotos_uploads"
            :on-change="handleAttorneySuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadAttorneyFile">点击上传</el-button>

          <hr>
          <i class="line" />
          <span class="fc">物业交割单</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="propertyDeliverys_uploads"
            :on-change="handlePropertyDeliverysSuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadPropertyDeliverysFile">点击上传</el-button>
          <hr>
          <i class="line" />
          <span class="fc">其他</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="otherPhotos_uploads"
            :on-change="handleOtherSuccess"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadOtherFile">点击上传</el-button>
          <hr>
          <el-col>
            <el-button style="margin-right: 80px">取 消</el-button>
            <el-button type="warning" style="margin-right: 80px" @click="goPrevent(0)">上一步</el-button>
            <el-button type="warning" style="margin-right: 10px" @click="goNext(1)">下一步</el-button>
          </el-col>
        </div>
      </el-tab-pane>
      <!--附件结束-->
      <!--付款单开始-->
      <el-tab-pane label="付款单" :disabled="payStatus" name="third">
        <el-table
          :data="payments"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column prop="itemType" label="序号" width="180" />
          <el-table-column prop="payableDate" label="应付日期" width="180">
            <template scope="scope">
              <span v-if="scope.row.isShowItem">
                <el-date-picker v-model="scope.row.payableDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
              </span>
              <span v-else>{{ scope.row.payableDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="paymentAmount" label="金额" width="180">
            <template scope="scope">
              <span v-if="scope.row.isShowItem">
                <el-input v-model="scope.row.paymentAmount" />
              </span>
              <span v-else>{{ scope.row.paymentAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tax" label="税费" width="180">
            <template scope="scope">
              <span v-if="scope.row.isShowItem">
                <el-input v-model="scope.row.tax" />
              </span>
              <span v-else>{{ scope.row.tax }}</span>
            </template>
          </el-table-column>
          <el-table-column label="付款状态" width="180">
            <template scope="scope">
              <span v-if="scope.row.isShowItem">
                <el-input v-model="scope.row.tax" />
              </span>
              <span v-else>{{ scope.row.tax }}</span>
            </template>
          </el-table-column>
          <el-table-column label="房产租金周期" width="500">
            <template scope="scope">
              <span v-if="scope.row.isShowItem">
                <el-date-picker v-model="scope.row.paymentDaysBegin" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 50%;" />至
                <el-date-picker v-model="scope.row.paymentDaysEnd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
              </span>
              <span v-else>{{ scope.row.paymentDaysBegin }}至{{ scope.row.paymentDaysEnd }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <el-button v-if="!scope.row.isShowItem" type="primary" size="small" @click="editProperty(scope.row,scope.$index)">编辑</el-button>
              <div v-else>
                <el-button type="primary" plain size="small" @click="saveProperty(scope.row,scope.$index)">保存</el-button>
                <el-button size="small" @click="cancelProperty(scope.row,scope.$index)">取消</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="warning" class="xyb" @click="goPrevent(1)">上一步</el-button>
        <el-button type="warning" class="xyb" @click="save()">保存</el-button>
      </el-tab-pane>
      <!--付款单结束-->
    </el-tabs>

    <el-dialog
      title="房产"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="searchForm.premiseName" style="width: 100px" placeholder="小区名称" />
        </el-form-item>
        <el-form-item label="租房类型">
          <el-select v-model="searchForm.leaseType1" style="width: 100px" placeholder="租房类型">
            <el-option label="请选择" value="-1" />
            <el-option v-for="(tenantManage,index) in tenantManages" :key="index" :label="tenantManage" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="premiseName" label="房产信息" />
        <el-table-column prop="roomName" label="居室" />
        <el-table-column prop="leaseType1" label="租房类型" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSelect(scope.row.houseId)">选中</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="current"
        :page-sizes="[10,20,30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  created() {
    this.initHouseAllTypeEnum()
    this.initRegion()
    this.initBank()
    this.initCertificateTypes()
    this.initAccountTypeEnum()
    this.initTenantManageEnum()
    this.initPaymentPayEnum()
    this.initPaymentMortgageList()
  },
  data() {
    return {
      signWithOwner: '',
      payments: [],
      infoStatus: false,
      disStatus: true,
      payStatus: true,
      houseDocumentPhotos_uploads: [],
      contractPhotos_uploads: [],
      cardPhotos_uploads: [],
      agentCardPhotos_uploads: [],
      bankCardInformationPhotos_uploads: [],
      attorneyPhotos_uploads: [],
      propertyDeliverys_uploads: [],
      otherPhotos_uploads: [],
      disabled: true,
      first: false,
      time1: '',
      time2: '',
      tableData: [],
      searchForm: {},
      dialogVisible: false,
      activeName: 'first',
      contractForm: {
        payMentltems: []
      },
      optio: '',
      houseAllTypes: [],
      regions: [],
      banks: [],
      certificateTypes: [],
      rooms: [],
      current: 1,
      size: 10,
      total: 0,
      leaseTypes: [],
      tenantManages: [],
      paymentPays: [],
      paymentMortgageList: [],
      accountType: []
    }
  },
  methods: {
    // 修改商品属性
    editProperty(row, index) {
      // 我这边是表格数据都是前端处理，需要把旧值存起来，用户点击修改之后修改了原来的数据，但是又点了取消的情况，还需要获取到原来的值
      sessionStorage.setItem('oldPropertValue', row.propertyValue)
      // isEditPropertyShow为ture展示输入框
      this.$set(this.payments[index], 'isShowItem', true)
    },
    // 保存商品属性
    saveProperty(row, index) {
      this.$set(this.payments[index], 'isShowItem', false)
    },
    // 取消商品属性编辑
    cancelProperty(row, index) {
      if (sessionStorage.getItem('oldPropertValue') !== 'null') {
        this.$set(this.payments[index], 'propertyValue', sessionStorage.getItem('oldPropertValue'))
      } else {
        this.$set(this.payments[index], 'propertyValue', '')
      }
      this.$set(this.payments[index], 'isShowItem', false)
    },
    save() {
      this.contractForm.payMentltems = this.payments

      this.contractForm.username = localStorage.getItem('username')
      console.log("登录姓名"+this.contractForm.username);
      axios.post('http://localhost:8200/hou/TSfContractController/extensionSfContract', this.contractForm).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: '恭喜你，续约成功',
            type: 'success'
          })
          location.reload();
        }
      })

    },
    handleChecked(val) {
      if (val) {
        this.contractForm.signUserName = this.contractForm.ownerName
        this.contractForm.signWithOwner = 1
        this.contractForm.signUserIdCard = this.contractForm.ownerIdCard
        this.contractForm.signUserMobile = this.contractForm.ownerMobile
      } else {
        this.contractForm.signUserName = ''
        this.contractForm.signUserIdCard = ''
        this.contractForm.signUserMobile = ''
        this.contractForm.signWithOwner = 0
      }
    },
    handleSelect(id) {
      console.log(id);
      //发送请求 根据id获取合同数据
      axios.get('http://localhost:8200/hou/TSfContractController/getContractByHouseId', {
        params: {
          houseId: id
        }
      }).then((response) => {
        console.log(response);
        this.contractForm=response.data.obj;
        this.contractForm.houseInfo=response.data.obj.houseName;
        this.dialogVisible=false;
      })
    },
    search() {
      this.current = 1
      this.initRoom()
    },
    selectHouse() {
      this.dialogVisible = true
      this.initRoom()
    },

    // 获取公私账号
    initAccountTypeEnum() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/TSfContractController/accountTypeEnum'
      }).then((res) => {
        if (res.data) {
          this.accountType = res.data.obj
        }
      })
    },

    // 获取租房类型
    initTenantManageEnum() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/TSfContractController/tenantManageEnum'
      }).then((res) => {
        if (res.data) {
          this.tenantManages = res.data.obj
        }
      })
    },

    // 押
    initPaymentMortgageList() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/TbRoomInfoController/getPaymentMortgageList'
      }).then((res) => {
        if (res.data) {
          this.paymentMortgageList = res.data.obj
        }
      })
    },

    // 付
    initPaymentPayEnum() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/TbRoomInfoController/getPaymentMortgageList'
      }).then((res) => {
        if (res.data) {
          this.paymentPays = res.data.obj
        }
      })
    },
    // 获取所有权类型
    initHouseAllTypeEnum() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/TSfContractController/houseAllTypeEnum'
      }).then((res) => {
        if (res.data) {
          this.houseAllTypes = res.data.obj
        }
      })
    },
    // 获取身份证类型
    initCertificateTypes() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/TSfContractController/certificateType'
      }).then((res) => {
        if (res.data) {
          this.certificateTypes = res.data.obj
        }
      })
    },
    initRegion() {
      axios.get('http://localhost:8200/sys/region/byparentid', {
        params: {
          id: 1
        }
      }).then((response) => {
        this.regions = response.data.obj
      })
    },
    initBank() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/tmbank/banks',
        params: {
        }
      }).then((res) => {
        if (res.data) {
          this.banks = res.data.obj
        }
      })
    },
    handleTime1(val) {
      if (val) {
        this.time1 = val
        console.log(this.time1)
        this.contractForm.startDate = this.time1
      }
    },
    handleTime2(val) {
      if (val) {
        this.time2 = val
        console.log(this.time2)
        this.contractForm.endDate = this.time2
      }
    },
    one() {
      if (this.time1 == null || this.time1 == '') {
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()) + 1)
        return
      }
      this.time2 = this.time1
      this.time2.setFullYear(Number(this.time2.getFullYear()) + 1)
      console.log(this.time1)
    },
    two() {
      if (this.time1 == null || this.time1 == '') {
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()) + 2)
        return
      }
      this.time2 = this.time1
      this.time2.setFullYear(Number(this.time2.getFullYear()) + 2)
      console.log(this.time1)
    },
    three() {
      if (this.time1 == null || this.time1 == '') {
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()) + 3)
        return
      }
      this.time2 = this.time1
      this.time2.setFullYear(Number(this.time2.getFullYear()) + 3)
    },
    four() {
      if (this.time1 == null || this.time1 == '') {
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()) + 4)
      }
      this.time2 = this.time1
      this.time2.setFullYear(Number(this.time2.getFullYear()) + 4)
    },
    five() {
      if (this.time1 == null || this.time1 == '') {
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()) + 5)
        return
      }
      this.time2 = this.time1
      this.time2.setFullYear(Number(this.time2.getFullYear()) + 5)
    },
    // 下一步
    goNext(val) {
      this.contractForm.startDate = this.time1
      this.contractForm.endDate = this.time2
      if (val == 0) {
        this.activeName = 'second'
        this.infoStatus = true
        this.disStatus = false
        this.payStatus = true
        axios({
          method: 'post',
          url: 'http://localhost:8200/hou/TSfContractController/generatePayMentPlan',
          data: this.contractForm
        }).then((res) => {
          console.log(res)
          this.payments = res.data.payMentPlanList
          this.contractForm.payMentltems = res.data.payMentPlanList
        })
      } else {
        this.activeName = 'third'
        this.disStatus = true
        this.infoStatus = true
        this.payStatus = false
      }
    },
    goPrevent(val) {
      if (val == 0) {
        this.activeName = 'first'
        this.infoStatus = false
        this.disStatus = true
        this.payStatus = true
      }
      if (val == 1) {
        this.activeName = 'second'
        this.infoStatus = true
        this.payStatus = true
        this.disStatus = false
      }
    },
    initRoom() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/TbHouseInfoController/getExtensionHouse',
        data: {
          premiseName: this.searchForm.premiseName,
          leaseType1: this.searchForm.leaseType1,
          pageNum: this.current,
          pageSize: this.size
        }
      }).then((res) => {
        if (res) {
          this.tableData = res.data.obj.records
          this.total = res.data.obj.total
          this.pageNum = res.data.obj.current
          this.pageSize = res.data.obj.size
          console.log(res)
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.initRoom()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.current = val
      this.initRoom()
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    ossUploadDocumentFile() {
      const formData = new FormData()
      this.houseDocumentPhotos_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.houseDocumentPhotos = res.data
          console.log(res)
        }
      })
    },
    ossUploadContractFile() {
      const formData = new FormData()
      this.contractPhotos_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.contractPhotos = res.data
        }
      })
    },
    ossUploadCardFile() {
      const formData = new FormData()
      this.cardPhotos_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.cardPhotos = res.data
        }
      })
    },
    ossUploadAgentCardFile() {
      const formData = new FormData()
      this.agentCardPhotos_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.agentCardPhotos = res.data
        }
      })
    },
    ossUploadBankCardFile() {
      const formData = new FormData()
      this.bankCardInformationPhotos_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.bankCardInformationPhotos = res.data
        }
      })
    },
    ossUploadAttorneyFile() {
      const formData = new FormData()
      this.attorneyPhotos_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.attorneyPhotos = res.data
        }
      })
    },
    ossUploadPropertyDeliverysFile() {
      const formData = new FormData()
      this.propertyDeliverys_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.propertyDeliverys = res.data
        }
      })
    },
    ossUploadOtherFile() {
      const formData = new FormData()
      this.otherPhotos_uploads.forEach(function(file) {
        if (file.raw) {
          formData.append('files', file.raw, file.name)
        }
      })
      const config = { 'Content-Type': 'multipart/form-data' }
      axios({
        method: 'post',
        url: 'http://localhost:8200/hou/upload/uploadHose',
        data: formData,
        config: config
      }).then((res) => {
        if (res.data) {
          this.contractForm.otherPhotos = res.data
        }
      })
    },
    handleHouseDocumentSuccess(file, files) {
      this.houseDocumentPhotos_uploads = files
    },
    handleContractSuccess(file, files) {
      this.contractPhotos_uploads = files
    },
    handleCardSuccess(file, files) {
      this.cardPhotos_uploads = files
    },
    handleAgentCardSuccess(file, files) {
      this.agentCardPhotos_uploads = files
    },
    handleBankCardSuccess(file, files) {
      this.bankCardInformationPhotos_uploads = files
    },
    handleAttorneySuccess(file, files) {
      this.attorneyPhotos_uploads = files
    },
    handlePropertyDeliverysSuccess(file, files) {
      this.propertyDeliverys_uploads = files
    },
    handleOtherSuccess(file, files) {
      this.otherPhotos_uploads = files
    }

  }

}
</script>

<style scoped>
.div{
  border:1px solid #bfcbd9;
  margin: auto;
}
.fc{
  font-size: 20px;
}
.xq{
  margin-left: 85px;
}
.fc1{
  margin-left: 232px;
}
.card{
  margin-left: 245px;
}
.lx{
  margin-left: 250px;
}
.zj{
  margin-left: 232px;
}
.dh{
  margin-left: 240px;
}
.fczs{
  margin-left: 200px;
}
.qx{
  margin-left: 870px;
  border:1px solid #f9944a;
  color: #f9944a;
}
.xyb{
  float: right;
  margin-right: 10px;
}
.line {
  height: 20px;
  width: 5px;
  border-radius: 10px;
  background: orange;
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  top: 4px;
}
.layui-layer-setwin .layui-layer-close2{
  opacity: 0!important;
  right: 6px!important;
  top: -2px!important;
}
.tan{
  width: 400px;
  border: solid 1px #dcdcdc;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  background: #fff;
  display: none;
}
.tan p:nth-child(1){
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  margin-top: 10px;
  cursor: pointer;
}
.tan p:nth-child(2){
  width: 400px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 17px;
}
.tan p:nth-child(3){
  width: 400px;
  text-align: center;
  margin-bottom: 25px;
}
.tan p:nth-child(3) button{
  width: 130px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  outline: none;
  border: none;
}
.tan p:nth-child(3) button:nth-child(1){
  border: solid 1px #ffa800;
  color: #ffa800;
  background: #fff;
  margin-right: 10px;
}
.tan p:nth-child(3) button:nth-child(2){
  background: #ffa800;
  color: #fff;
  margin-left: 10px;
}
.searchable-select-dropdown{
  z-index:9999
}
</style>
